<!doctype html>
<html>
<head>
<script src="/blue/js/jquery.js"></script>
<link href="/blue/css/css.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telephone=no" />
<meta charset="utf-8">
<title>无标题文档</title>
<style>
/*充值账户*/
.column_box p{ position:absolute;right:4%;top:0; color:#191919;}
/*充值金额*/
.money_box{ height:127px; position:relative; background-color:#fff;}
.money_box h1{ line-height:39px; font-size:14px; color:#65646b; margin-left:4%;}
.money_box h1 span{font-size:12px; color:#ff7f00;}
.money{ float:left; width:20%; height:33px; line-height:33px; text-align:center; color:#191919; margin-left:4%; border:1px solid #ccc; border-radius:3px; box-sizing:border-box; background-position:left top; background-size:19px 19px; background-repeat:no-repeat;}
.money_box input{ width:20%; height:33px; text-align:center; color:#01aff0; border:1px solid #ccc; border-radius:3px; box-sizing:border-box; position:absolute;left:76%;top:39px;}
input:placeholder{color:#191919;}
.choose{ border:1px solid #01aff0; color:#01aff0;}
.first{ height:23px; line-height:23px; width:20%; margin-top:7px; margin-left:auto; margin-right:auto; text-align:center; font-size:12px; color:#65646b; position:relative}
.first .border_top{ top:11px; width:180%;}
.money_box p{ text-align:center; font-size:12px; color:#ff7f00; line-height:12px;}

/* all */
.money_box input::-webkit-input-placeholder { color:#191919; }
.money_box input::-moz-placeholder { color:#191919; } /* firefox 19+ */
.money_box input:-ms-input-placeholder { color:#191919; } /* ie */
.money_box input input:-moz-placeholder { color:#191919; }

/*选择套餐*/
.setmeal_box{ background-color:#fff; position:relative; padding-top:14px;}
.setmeal_title{ line-height:13px; font-size:14px; color:#65646b; margin-left:4%;}
.setmeal{ width:92%; margin-left:4%; position:relative}
.setmeal > h1,.setmeal > h2{ line-height:42px; float:left; font-size:14px; color:#191919;}
.setmeal > h2{ margin-left:10%; color:#c40000;}
.setmeal img{ width:11px; height:auto; position:absolute; left:50%; top:20px;}
.setmeal input{ float:right; width:16px; height:16px; margin-top:13px;}
.text h1{ line-height:13px; font-size:14px; color:#191919; margin-bottom:13px;}
.text h2{ line-height:11px; font-size:12px; color:#191919; margin-bottom:7px;}
.text p{ line-height:17px; font-size:12px; color:#65646b;}
/*推荐人手机号*/
.column_box h1{ line-height:46px; float:left; color:#191919;}
.column_box input{ width:130px; margin-left:27px;}
</style>
</head>

<body style="background-color: #f9f9f9;">
<!--header顶部标题-->
<div class="header">充值金额
	<div class="header_left" onclick="window.history.go(-1)"><img src="/blue/images/return.png"></div>
</div>
<!--充值账户-->
<div class="column_box " style="margin-top:14px;">充值帐号
	<div class="border_top"></div>
    <?php if (session('name') != ""){?>
    <p class='user'>{{ session('name') }}</p>
    <?php }else{?>
    <p>您还未登录</p>
    <?php } ?>
    <div class="border_bottom"></div>
</div>
<!--充值金额-->
<div class="money_box">
	<h1>选择充值金额&nbsp;&nbsp;&nbsp;&nbsp;<span>（100起充）</span></h1>
    <div>
    <div class="money choose cz" style="background-image:url(/blue/images/recommend.png)">500</div>
    <div class="money cz">100</div>
    <div class="money cz">200</div>
    <input placeholder="其他" type="number" id="qt">
    </div>
    <div class="clearfix"></div>
    <div class="first">首次充值
    	<div class="border_top" style="left:-180%;"></div>
        <div class="border_top" style="right:-180%;left:inherit"></div>
    </div>
    <p>充100一百以上&nbsp;&nbsp;&nbsp;&nbsp;送100</p>
    <div class="border_bottom"></div>
</div>
<!--选择套餐-->
<div class="setmeal_box">
	<div class="setmeal_title">选择套餐</div>
    @foreach ($row as $v)
    <div class="setmeal">
    	<h1>充值<span>{{ $v->czje }}</span></h1>
        <h2>送<span>{{ $v->zsje }}</span></h2>
        <img src="/blue/images/btn.png" class="up">
        <img src="/blue/images/btn1.png" class="down">
        <input type="radio" name="setmeal" value="1" class="cz1">
        <div class="clearfix"></div>
        <div class="text">
        	<h1>送各类券品1张</h1>
        	<h2>赠送明细</h2>
            <p class="yhj1"><span class="je">{{ $v->jine }}</span><span>{{ $v->title_one }}</span></p>
            <p class="yhj2" style="display: none">{{ $v->title_two }}</p>
            <p class="yhj3" style="display: none">{{ $v->title_three }}</p>
{{--            <p class="yhj4" style="padding-bottom:11px;">{{ $v->title_four }}</p>--}}
        </div>
        <div class="border_bottom"></div>
    </div>
    @endforeach
    <div class="border_bottom"></div>
</div>
<!--推荐人手机号-->
<div class="column_box" style="margin-top:14px; margin-bottom:100px;">
	<div class="border_top"></div>
    @if($res->tel == "")
        <h1>推荐人手机号</h1>
        <input placeholder="您还没填写推荐人手机号" id='tel'>
    @else
        <h1>推荐人手机号</h1>
        <input placeholder="{{ $res->tel }}" readonly="readonly" id='tel'>
    @endif
    <div class="border_bottom"></div>
</div>
<!--立即充值-->
<div class="confirm_box">
	<div class="confirm" style="background-color:#01aff0" id="ljcz">立即充值</div>
</div>
<script>
var cz = '500';//金额
var dc = '';    //套餐金额
//隐藏赠送明细
$(".text").hide();
//隐藏套餐列表
$(".setmeal_box").hide();
//点击下拉按钮、显示赠送明细
$(".down").click(
	function(){
		$(".text").hide();
		$(this).siblings(".text").show();
		$(".down").show();
		$(this).hide();
		}
)
//点击收起按钮，隐藏赠送明细
$(".up").click(
	function(){
		$(this).siblings(".text").hide();
		$(this).siblings("img").show();
		}
)
//选择金额，改变所选金额样式
$('.cz').each(function(i){
    $('.cz').eq(i).click(function(){
        cz = $(".cz").eq(i).text();
        $(".money_box input").css("border","1px solid #ccc");
        $(this).addClass("choose").siblings().removeClass("choose");
        $(".setmeal_box").hide();
        $('#qt').attr('placeholder','其他');
    });
});
//选择其他金额，显示金额输入框
$(".money_box input").click(
	function(){
		$(this).css("border","1px solid #01aff0");
		$(this).siblings().removeClass("choose");
		$(".setmeal_box").show();
		$(".money_box input").show();
		}
);

$('.cz1').each(function(i) {
    $('.cz1').eq(i).click(function(){
        var a = $('.cz1').eq(i).siblings('h1').find('span').text();
        var b = $('.cz1').eq(i).siblings('h2').find('span').text();
        var c = $('.yhj1').eq(i).text();
        var d = $('.yhj2').eq(i).text();
        var e = $('.yhj3').eq(i).text();
        je = $('.je').eq(i).text();
        dc =a*1+b*1;
        cc=$("#qt").val(a);
        yhj1 = c;
        yhj2 = d;
        yhj3 = e;
        $('#qt').attr('placeholder',a+'元');
    });
});

$('#qt').blur(function (){
    dc = $(this).val();
    console.log(dc);
});

$("#ljcz").click(function () {
    var data = {};
    data['user']=$('.user').text();
    data['tel']=$('#tel').val();
    if(dc!=''){         //选择的是套餐
        data['dc'] = dc;       //套餐金额
        if(typeof cc!='undefined') {
            data['jine'] = je;
            data['yhj1'] = yhj1;
            data['yhj2'] = yhj2;
            data['yhj3'] = yhj3;
        }
        // data['yhj4']=yhj4;
        // console.log(data);
        data = JSON.stringify(data);
        $.post('recharge_add',{data},function(res){
            if(res.res == 1){
                alert('充值成功');
                window.location.href='money';
            }else{
                alert('充值失败');
            }
        });
    }else{      //普通金额
        data['cz'] = cz;        //普通金额
        data = JSON.stringify(data);
        $.post('recharge_add',{data},function(res){
            if(res.res==1){
                alert('充值成功');
                window.location.href='money';
            }else{
                alert('充值失败');
            }
        });
    }
});
</script>


</body>
</html>

